<template>
  <div class="setSigna">
      <div class="setSigna-title">
        <h3><i></i>{{title}}</h3>
      </div>
      <div class="setSigna-main">
          <div class="setSigna-main-box">
              <div class="setSigna-name-box">
                  <div class="setSigna-name-message">
                      <i class="el-icon-info"></i>
                      拖拽图标到右边文件签署位置即可
                  </div>
                  <div class="setSigna-name-action">
                      <div class="setSigna-name-title">
                          <i class="el-icon-s-check"></i>
                          签署位置
                      </div>
                  </div>
              </div>
              <div class="setSigna-contract">
                  <div class="pdf-box" ref="imageWrapper">
                      <!-- <pdf  v-for="i in numPages" :key="i"  :src="url" :page="i"></pdf> -->
                      <div class="contract-main">
                        <img src="@/assets/image/hetong.png">
                      </div>
                      <div class="name" @mousedown="start($event)" @mouseup='end($event)'>
                        <img src="@/assets/image/operator.png">
                      </div>
                  </div>
              </div>
           </div>
           <img :src="Url">
           <div class="next-btn">
               <el-button type="primary" size="small" @click="nextPage">{{nextTitle}}</el-button>
               <el-button plain size="small" @click="cancel">{{backTitle}}</el-button>
           </div>
      </div>
  </div>
</template>

<script>
// import pdf from 'vue-pdf'
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      title: '设置签名位置',
      nextTitle: '提交审核',
      backTitle: '取消',
      url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      numPages: 16,
      pageX: 0,
      pageY: 0,
      Url: ''
    }
  },
  components: {
    // pdf
  },
  methods: {
    nextPage () {
      const x = document.querySelector('html')
      html2canvas(this.$refs.imageWrapper, {
        width: this.$refs.imageWrapper.scrollWidth,
        height: this.$refs.imageWrapper.scrollHeight,
        scrollY: -x.scrollTop,
        scrollX: -x.scrollLeft
      }).then(canvas => {
        const dataURL = canvas.toDataURL('image/png')
        this.Url = dataURL
      })
      // if (this.nextTitle === '保存') {
      //   this.$router.push('/loanProducts')
      // } else {
      //   this.$router.push('/index')
      // }
    },
    cancel () {
      this.$router.go(-1)
    },
    start (event) {
      const _target = event.currentTarget
      const startx = event.clientX
      const starty = event.clientY
      const sbbkx = startx - event.currentTarget.offsetLeft
      const sbbky = starty - event.currentTarget.offsetTop
      const ww = document.documentElement.clientWidth
      const wh = window.innerHeight
      if (event.preventDefault) {
        event.preventDefault()
      } else {
        event.returnValue = false
      }
      document.onmousemove = function (ev) {
        const event = ev || window.event
        // const scrolltop = document.documentElement.scrollTop || document.body.scrollTop
        if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww) {
          return false
        }
        const endx = event.clientX - sbbkx
        const endy = event.clientY - sbbky
        _target.style.left = endx + 'px'
        _target.style.top = endy + 'px'
      }
    },
    end (e) {
      document.onmousemove = null
    }
  },
  created () {
    const code = window.sessionStorage.getItem('setTemplate')
    if (code === 'true') {
      this.nextTitle = '保存'
    }
    window.sessionStorage.setItem('setTemplate', 'false')
  },
  mounted () {
  }
}
</script>

<style scoped>
 .setSigna{
     background: #fff;
     width: 100%;
     height: 100%;
 }
 .setSigna-title i{
  width: 4px;
  height: 16px;
  background: #5290FF;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}
 .setSigna-title h3{
    margin: 0 37px;
    height: 70px;
    padding-left: 20px;
    font-size: 18px;
    line-height: 70px;
    font-weight: bold;
    border-bottom: 1px solid rgba(187, 187, 187, 0.43);
    margin-bottom: 9px;
}
.setSigna-main{
  position: relative;
}
.setSigna-main-box{
    display: flex;
    margin-left: 41px;
    margin-bottom: 42px;
    margin-right: 331px;
}
.setSigna-name-box{
    width: 307px;
    height: 813px;
    margin-right: 10px;
    border: 1px solid rgba(187, 187, 187, 1);
}
.setSigna-name-message{
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid rgba(187, 187, 187, 1);
    margin-left: 8px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 30px;
}
.setSigna-name-message i{
    margin-right: 8px;
}
.setSigna-name-action{
    padding-left: 26px;
}
.setSigna-name-title{
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 23px;
}
.setSigna-name-title i{
    font-size: 24px;
    margin-right: 16px;
}
.setSigna-name-action span{
    padding: 2px 13px;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(16, 16, 16, 0.49);
    color: #fff;
    font-size: 14px;
}
.setSigna-name-action span i{
    margin-right: 9px;
}
.next-btn{
  display: flex;
  justify-content: center;
  padding-bottom: 56px;
}
.next-btn >>> .el-button--primary{
  margin-right: 24px;
}
.setSigna-contract{
    height: 813px;
    flex: 1;
    border: 1px solid rgba(187, 187, 187, 1);
    text-align: center;
    overflow: auto;
}
.setSigna-contract .name{
  position: absolute;
  left: 68px;
  top: 126px;
  width: 100px;
  height: 60px;
  background: #fff;
}
.setSigna-contract .name img{
  width: 100px;
  height: 60px;
}
</style>
